<template>
  <div style="padding: 10px;">
    <!--<Particles></Particles>-->
    <!--功能区域-->
    <div style="margin: 10px 0">
      <el-button type="success" round @click="add">新增</el-button>
      <el-button type="primary" round>导入</el-button>
      <el-button type="success" round>导出</el-button>
    </div>

    <!--搜索-->
    <div style="margin: 10px; text-align: center;margin-left: -120px;border-radius: 20px">
      <el-input @keyup.enter.native="load" v-model="search" placeholder="请输入关键字"
                style="border-radius: 20px;width: 20%;" clearable=""></el-input>
      <el-button type="primary" style="margin-left: 7px" @click="load">查询</el-button>
    </div>

    <el-table
      :data="tableData"
      border
      stripe=""
      size="small"
      style="width: 100%">
      <el-table-column
        prop="id"
        sortable=""
        label="ID">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题">
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者">
      </el-table-column>

      <el-table-column
        prop="time"
        label="时间">
      </el-table-column>


      <el-table-column
        width="170px"
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <!--详情-->
          <el-button type="primary" @click="details(scope.row)" icon="el-icon-info" circle></el-button>
          <!--编辑-->
          <el-button type="primary" @click="handleEdit(scope.row)" icon="el-icon-edit" circle></el-button>

          <!--删除-->
          <el-button @click="handleDelete(scope.row.id)"
                     slot="reference" type="danger" icon="el-icon-delete" circle
                     style="margin-left: 10px"></el-button>


        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5,10,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

      <!--新增-->
      <el-dialog

        title="新增"
        :visible.sync="dialogVisible"
        width="50%">
        <el-form :model="form" label-width="120px">
          <el-form-item label="标题">
            <el-input v-model="form.title" style="width: 50%"></el-input>
          </el-form-item>

          <div id="div1">

          </div>



        </el-form>

        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
      </el-dialog>
    </div>
    <el-dialog

      title="详情"
      :visible.sync="vis"
      width="50%">
      <el-card  >
        <div v-html="detail.content" style="min-height: 100px"></div>

      </el-card>


    </el-dialog>

  </div>
</template>

<script>
  // @ is an alias to /src

  import request from '@/utils/request'

  import E from 'wangeditor'

  let editor;
  export default {
    name: 'News',

    data() {
      return {
        form: {},
        user:{},
        //新增
        dialogVisible: false,
        search: '',
        vis: false,
        //当前页
        currentPage4: 1,
        pageSize: 5,
        total: 0,
        tableData: [],
        detail: {}
      }


    },

    created() {
      let userStr = sessionStorage.getItem("user") || "{}"
      let user = JSON.parse(userStr)
      this.load()
    },
    methods: {


      //详情
      details(row) {
        this.detail = row
        this.vis = true
      },

      //文件
      filesUploadSuccess(res) {


        this.form.avatar = res.data;
      },
      //查询
      load() {
        request.get('/new', {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            search: this.search
          }

        }).then(res => {

          this.tableData = res.data.records
          this.total = res.data.total


        })
      },

      //新增
      add() {
        this.dialogVisible = true
        this.form = {} //清空输入的表单
        this.load()

        //缓冲
        this.$nextTick(() => {
          if (editor==null){
            editor = new E('#div1')
            editor.config.uploadImgServer = 'http://localhost/files/editor/load'
            editor.config.uploadFileName="file"
            editor.create()
          }else {
            editor.destroy()
            editor = new E('#div1')
            editor.create()
          }
        })

      },
      //保存到后台
      save() {
        this.form.content = editor.txt.html()//获取编辑器的值，赋予到实体当中
        console.log(editor.txt.html())


        if (this.form.id) {
          //    更新
          request.put("/new", this.form).then(res => {
            if (res.code ===20000) {
              this.$message({
                message: '更新成功',
                type: 'success',

              });
              this.load()
            } else {
              this.$message({

                message: res.msg,
                type: 'error',

              })
            }

          })
          this.dialogVisible = false
          this.load()
        } else {
          //    新增
          let userStr = sessionStorage.getItem("user") || "{}"
          let user = JSON.parse(userStr)
          this.form.author = user.nickName

          request.post("/new", this.form).then(res => {
            console.log(res)
            this.dialogVisible = false
            if (res.code ===20000) {


              this.$message({
                message: '添加成功',
                type: 'success',

              });
              this.load()
            }

            else {
              this.$message({

                message: res.msg,
                type: 'error',

              })
            }
          })
        }


      },
      //编辑
      handleEdit(row) {
        //缓冲
        this.form = JSON.parse(JSON.stringify(row))
        this.$nextTick(() => {
            if (editor==null){
              editor = new E('#div1')

              editor.config.uploadImgServer = 'http://localhost/files/editor/load'
              editor.config.uploadFileName="file"

              editor.create()
              editor.txt.html(row.content)
            }else {
              editor.destroy()
              editor = new E('#div1')
              editor.create()
              editor.txt.html(row.content)
            }
          }
        )

        this.dialogVisible = true

      },
      handleDelete(id) {

        this.$confirm('你确定要删除,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          request.delete("/new/" + id).then(res => {

            this.$message({type: 'success', message: '删除成功!'})
            this.load()
          })
        }).catch(() => {
          this.$message({type: 'success', message: '已取消删除'})
        })


      },
      //页码 每页的个数
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.load()
      },
      //改变当前页
      handleCurrentChange(pageNum) {
        this.currentPage = pageNum
        this.load()
      },

    }
  }
</script>

<style scoped>

  el-input {
    border-radius: 20px
  }
</style>
